﻿<template>
    <div class="header_other">
      <div class="wrap_header_other clearfix">
          <div class="header_title_other">
            {{header_name}}
          </div>
          <!---->
        <!--<img src="../../../static/img/letter_goback.png" class="goback_btn" v-on:click="goback_btn">-->
          <!--<img src="../../../static/img/Header_other/Header_other_cross.png" alt="" class="base_header_img header_other_cross f_R">
          <img src="../../../static/img/Header_other/Header_other_search.png" alt="" 
               class="base_header_img header_other_search f_R" v-on:touchstart.self="show_select">
          <img src="../../../static/img/Header_other/Header_ohter_music.png" 
               alt="" class="base_header_img header_other_music f_R" v-on:touchstart.self="show_music_player">-->
      </div>

      <!--music player -->
      <transition name="bounce" >
        <div class="header_other_music_player" v-show="music_show" ref="music" v-on:before-enter="beforeEnter_music">
          <img src="../../../static/img/header_doc.png" alt="" class="img">
          <img src="../../../static/img/header_g.png" alt="" class="img">
          <img src="../../../static/img/header_face.png" alt="" class="img">
          <div class="music_player_line">
            <div class="act_music_p_line">
            </div>
          </div>
          <img src="../../../static/img/header_left.png" alt="Alternate Text" class="img" />
          <img src="../../../static/img/header_stop.png" alt="Alternate Text" class="img" />
          <img src="../../../static/img/header_right.png" alt="Alternate Text" class="img" />
          <img src="../../../static/img/header_heart.png" alt="Alternate Text" class="img heart_img" />
        </div>
      </transition>

      <!--search-->
      <transition name="bounce" v-on:before-enter="beforeEnter_search">
        <div class="wrap_header_search" v-show="seach_show" ref="search"  >
          <div class="wrap_header_school">
            学校
          </div>
          <input type="type" name="name" value="" class="input_school" />
          <div class="search_sex">
            性别
          </div>
          <div class="select_sex_man" v-bind:class="{select_sex_man_act : !sex_select }" v-on:touchstart.self="change_select_sex">

          </div>
          <div class="select_sex_g" v-bind:class="{select_sex_g_act : sex_select }" v-on:touchstart.self="change_select_sex">
          </div>
          <div class="search_btn">
            ID搜索
          </div>
        </div>
      </transition>
</div>
</template>
<style scoped>
  /*goback_btn*/
  .goback_btn{
    transform:translateY(-50%);
    top:50%;
    left:3.2%;
    position:absolute;
    width:5%;
    display:block;
  }
  /*search s*/
  .search_btn {
    font-size: 0.6rem;
    color: #fff;
    width: 15%;
    height: 1.45rem;
    line-height: 1.45rem;
    background-color: #e85454;
    text-align: center;
    border-radius: 1vw;
    margin-top: 0.15rem;
    margin-left: 2%;
  }
  .wrap_header_search .select_sex_g_act {
    background-image: url("../../../static/img/Header_other/search_select_g.png?1");
  }
  .select_sex_g {
    width: 8%;
    height: 1.425rem;
    background-image: url("../../../static/img/Header_other/none_search_select_g.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(15%);
  }
  .wrap_header_search .select_sex_man_act {
    background-image: url("../../../static/img/Header_other/search_select_man.png");
  }
  .select_sex_man {
    width: 8%;
    height: 1.425rem;
    background-image: url("../../../static/img/Header_other/none_select_man.png");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(15%);
    margin-left: 1.2%;
  } 
  .search_sex {
    font-size: 0.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    color: #fff;
  } 
  .input_school {
    width: 40%;
    height: 1.1rem;
    line-height: 1.1rem;
    border-radius: 1vw;
    outline: none;
    font-size: 0.6rem;
    transform: translateY(10%);
    margin-left: 1.2%;
    margin-right: 1.2%;
  }
  .wrap_header_search {
    transform:translateY(2.2rem);
    position: absolute;
    top: 0rem;
    width: 100%;
    height: 1.8rem;
    background-color: #563117;
    z-index: 0;
    display:flex;
  }
  .wrap_header_school{
    font-size:0.8rem;
    height:1.8rem;
    line-height:1.8rem;
    color:#fff;
    margin-left:1.3%;
    font-weight:600;
  }
  /*search e*/
  /*music player animate s*/
  .bounce-enter-active {
    transform: translateZ(0);
    /*-moz-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -o-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);*/
    animation: bounce-in .5s ease-in-out;
  }
  .bounce-leave-active {
    transform: translateZ(0);
   /* -moz-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -o-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);*/
    animation: bounce-in .5s reverse ease-in-out;
  }

  @keyframes bounce-in {
  0% {
      transform: translateY(0);
      top:0rem;
      z-index:0;
     // opacity:0
  }
  100% {
    transform: translateY(2.2rem);
    z-index: 100;
    //opacity:1;
  }
  }
  /*music player animate e*/
  .wrap_header_other{
    z-index:100;
    height:100%;
    position:relative;
    background-color:#9f5c2f;
  } 
  .header_other_music_player .heart_img {
    margin-top: 0.45rem;
  }
    .music_player_line{
        width:25%;
        height:0.5rem;
        border:1px solid #ffffff;
        border-radius:2vw;
        float:left;
        background-color:#ffffff;
        margin:0.8rem 4% 0;
        position:relative
    }
    .act_music_p_line{
        position:absolute;
        top:50%;
        left:4%;
        transform:translateY(-50%);
        width:20%;
        height:90%;
        background-color:#9f5c2f;
        border-radius:2vw;
        z-index:0;
    }
    .img{
      width: 6%;
      margin-top: 0.3rem;
      margin-left: 3%;
      display: block;
      float:left;
    }
  .header_other_music_player {
    transform: translateY(2.2rem);
    position: absolute;
    top: 0rem;
    width: 100%;
    height: 1.8rem;
    background-color: #563117;
    z-index: 0;
  }
    .header_other{
      position: relative;
      /*height: 2.6rem;*/
      /*line-height: 2.6rem;*/
      height: 2.2rem;
      line-height: 2.2rem;
      background-color: #9f5c2f;
      z-index:100;
    }
    .header_title_other{
         line-height: 2;
        float: left;
        letter-spacing: 1px;
        margin-left: 13%;
        font-weight: 600;
        height:2.2rem;
        line-height:2.2rem;
        color: #ffffff;
        font-size: 1rem;
    }
    .base_header_img{
      padding-top: 0.6rem;
      margin-right: 5%;
    }
    .header_other_music{
      width:5%;
      float: right;
      margin-right: 5.5%;
    }
    .header_other_search{
     width: 5.5%;
     float: right;
   }
    .header_other_cross{
      width:5.5%;
      float: right;
    }
    .music_player_line{

    }
</style>
<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import store from '../../vuex/store_index'

  export default {
    name: 'Header_other',
    data () {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true,
        music_show: false,
        sex_select: false,
        seach_show: false,
        sex_select_flag: false,
        seach_show_flag:false
      }
    },
    props :['header_name'],
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      //goback_btn: function () {
      //  this.$router.back(-1);
      //},
      show_music_player: function () {
        this.music_show = !this.music_show;
      },
      show_select: function (){
        this.seach_show = !this.seach_show
      },
      change_select_sex: function () {
        this.sex_select = !this.sex_select
      },
      beforeEnter_search: function () {
        if (this.music_show == true) {
          this.music_show = false;
        }
      },
      beforeEnter_music: function () {
        if (this.show_select == true) {
          this.show_select = false;
        }
      }
      
    },
    mounted(){
      //      this.$store.getters.Get_Bot_C_obj
     
    }
  }
</script>
<!--inner style for thom template-->

